<template>
  <div class="controlPanel">
    <router-link target="_blank" to="/publishPage" :title="$t('home.controlPanel.publishTitle')">
      <div class="controlPanel-top">
        <i class="iconfont icon-fabusekuai" style="font-size: 30px;"></i>
      </div>
    </router-link>
    <div class="controlPanel-middle" style="background-color: white">
      <div v-for="(work, index) in worksInfo" class="controlPanel-middle-sub" :key="index">
        <div v-if="work.worksName == 'ERROR'">{{$t('home.controlPanel.error')}}</div>
        <div v-if="work.worksName == 'QUESTION'">{{$t('home.controlPanel.question')}}</div>
        <div v-if="work.worksName == 'BLINK'">{{$t('home.controlPanel.blink')}}</div>
        <div>{{work.counts}}</div>
      </div>
    </div>
    <div class="controlPanel-bottom">
      <div class="controlPanel-bottom-title"><i class="iconfont icon-wenzhang-copy" style="font-size: 16px; margin-right: 5px;"></i>{{$t('home.controlPanel.boutiqueContent')}}</div>
      <div v-if="goodContent.length != 0">
        <div v-for="(item,index) in goodContent" :key="index">
          <router-link  target="_blank" :to="{path:'/worksDisplayPage',query:{workId:item.articleId}}">
            <div class="controlPanel-bottom-content" :title=item.articleTitle>
              {{index+1}}. {{item.articleTitle}}
            </div>
          </router-link>
        </div>
      </div>
      <div v-else class="controlPanel-bottom-content">
        {{$t('home.controlPanel.noMore')}}
      </div>
    </div>
  </div>
</template>

<script>
    export default {
        name: "ControlPanel",
        data(){
            return{
                worksInfo:'',
                goodContent:'',

                baseURL:'http://localhost:8081/homePage/worksCounts',
                baseURL2:'http://localhost:8081/homePage/goodContent',
            }
        },
        mounted() {
            this.axios.post(this.baseURL).then(res=>{
                this.worksInfo = res.data
            }).catch(
                exception=>{
                    console.log(exception)
                }
            )

            this.axios.post(this.baseURL2).then(res=>{
                this.goodContent = res.data
            }).catch(
                exception=>{
                    console.log(exception)
                }
            )
        }
    }
</script>

<style scoped>
  .controlPanel{
    width: 310px;
    min-height: 500px;
    letter-spacing: 1px;
  }
  .controlPanel-top{
    /*display: block;*/
    height: 45px;
    background-color: cadetblue;
    border-radius: 3px;
    color: rgb(92, 92, 92);
    line-height: 45px;
    text-align: center;
    border: solid 1px rgb(229, 229, 229);
    transition: 0.2s;
  }
  .controlPanel-top:hover{
    background-color: #00988a;
    color: rgb(96, 96, 96);
    border: solid 1px rgb(131, 131, 131);
    box-shadow: 0 0 5px rgb(131, 131, 131);
  }
  .controlPanel-top:active{
    background-color: #00897bcc;
  }
  .controlPanel-middle{
    width: 310px;
    height: 82px;
    background-color: white;
    border-radius: 3px;
    margin-top: 10px;
    position: relative;
  }
  .controlPanel-middle-sub{
    width: 80px;
    height: 80px;
    background-color: rgba(2555,255,255,1);
    border-radius: 3px;
    /*border-right: solid 1px rgb(237, 237, 237);*/
    transition: 0.2s;
    position: absolute;
  }
  /*.controlPanel-middle-sub:hover{*/
  /*  box-shadow: 0 0 5px rgb(193, 193, 193);*/
  /*}*/
  .controlPanel-middle-sub:nth-child(1){
  }
  .controlPanel-middle-sub:nth-child(2){
    margin-left: 115px;
  }
  .controlPanel-middle-sub:nth-child(3){
    margin-left: 228px;
  }
  .controlPanel-middle-sub div:nth-child(1){
    line-height: 39px;
    text-align: center;
    font-size: 10px;
    font-weight: bolder;
    color: rgb(77, 77, 77);
  }
  .controlPanel-middle-sub div:nth-child(2){
    line-height: 39px;
    text-align: center;
    font-size: 10px;
    font-weight: bolder;
    color: #00695fc2;
  }
  .controlPanel-bottom{
    /*min-height: 350px;*/
    margin-top: 10px;
    border-radius: 3px;
    background-color: rgba(2555,255,255,1);
    border: solid 1px rgb(237, 237, 237);
    padding-bottom: 10px;
    transition: 0.3s;
  }
  .controlPanel-bottom:hover{
    box-shadow: 0 0 5px rgb(193, 193, 193);
  }
  .controlPanel-bottom-title{
    width: 90%;
    height: 45px;
    margin: 10px auto;
    border-bottom: solid 1px rgb(216, 216, 216);
    line-height: 60px;
    color: rgb(78, 78, 78);
    font-size: 14px;
    font-weight: bolder;

  }
  .controlPanel-bottom-content{
    width: 90%;
    height: 30px;
    line-height: 30px;
    font-size: 12px;
    color: rgb(126, 126, 126);
    margin: 0 auto;
    /* 处理文字溢出 */
    display: -webkit-box;
    overflow:hidden;
    text-overflow: ellipsis;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:1;
  }
  .controlPanel-bottom-content:hover{
    color: rgb(0, 40, 44);
  }
</style>
